<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .table, .table th, .table td {
            border: 1px solid #FF7777;
            /* 收紧单元格之间的边框 */
            border-collapse: collapse;
            width: 1200px;
            margin: 0px auto;
        }

        /* 单元格，可以设置文字的颜色 */
        .table th,.table td {
            padding: 6px;
            color: #444444;
        }

        /* 隔行效果：奇数行 */
        .table>tbody>tr:nth-child(odd) {
            background-color: #77FF77;
        }

        /* 隔行效果：偶数行 */
        .table>tbody>tr:nth-child(even) {
            background-color: #7777FF;
        }

        /* 鼠标浮动，改变行的背景色 */
        .table>tbody>tr:nth-child(n):hover {
            background-color: #FF00FF;
        }
    </style>
</head>
<body>
    <main id="app">
        <form @submit.prevent="handleSubmit" ref="myForm">
            <div>姓名：<input type="text" v-model="formData.name" required></div>
            <div>年龄：<input type="number" v-model="formData.age" required max="99" min="0"></div>
            <div>电话：<input type="tel" v-model="formData.tel" required pattern="1\d{10}"></div>
            <div>性别：男<input type="radio" v-model="formData.sex" value="1">女<input type="radio" v-model="formData.sex" value="2"></div>
            <div>
                专业：
                <select v-model="formData.major">
                    <option v-for="item in majorList" :value="item.value" :key="item.value">{{item.label}}</option>
                </select>
            </div>
            <div>
                爱好：
                <span v-for="item in fondList">
                    {{item.label}}<input type="checkbox" :value="item.value" :key="item.value" v-model="formData.fond"/>
                </span>
            </div>
            <div>
                <input type="submit" value="添加">
                <input type="button" value="保存" @click="handleSave">
            </div>
        </form>
        <section>
            <table class="table">
                <thead>
                    <tr>
                        <th>姓名</th>
                        <th>年龄</th>
                        <th>性别</th>
                        <th>电话</th>
                        <th>专业</th>
                        <th>爱好</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="item in tableData">
                        <td>{{item.name}}</td>
                        <td>{{item.age}}</td>
                        <td>{{item.sex == '1' ? '男' : '女'}}</td>
                        <td>{{item.tel}}</td>
                        <td>{{item.major}}</td>
                        <td>{{toFondText(item.fond)}}</td>
                        <td><button @click="handleDelete(item.id)">删除</button></td>
                    </tr>
                </tbody>
            </table>
        </section>
    </main>
</body>
<script src="../vue.min.js"></script>
<script>
    new Vue({
        el: "#app",
        data() {
            return {
                formData: {
                    name: "奉先",
                    age: "35",
                    sex: "1",
                    tel: "13547811112",
                    major: "1",
                    fond: []
                },
                majorList: [
                    {value: 1,label: "WEB"},
                    {value: 2,label: "JAVA"},
                    {value: 3,label: "UI"},
                    {value: 4,label: "网络安全"},
                ],
                fondList: [
                    {value: 1,label: "足球"},
                    {value: 2,label: "篮球"},
                    {value: 3,label: "橄榄球"},
                    {value: 4,label: "棒球"},
                ],
                id: 1,
                tableData: []
            }
        },
        methods: {
            handleSubmit() {
                let newRow = this.formData;
                newRow.id = this.id ++;
                this.tableData.push(newRow);
                this.formData = {
                    sex: "1",
                    major: "1",
                    fond: []
                };
                // this.$refs.myForm.reset();
            },
            handleDelete(id) {
                // let index = this.tableData.findIndex(v => v.id == id);
                // this.tableData.splice(index,1);

                this.tableData = this.tableData.filter(v => v.id != id);
            },
            toFondText(fond) {
                let arr = fond.map(v => {
                    let obj = this.fondList.find(v2 => v2.value == v)
                    return obj.label;
                })
                return arr.join(",");
            },
            handleSave() {
                // 把对象转为字符串
                let jsonStr = JSON.stringify(this.tableData);
                localStorage.setItem("tableData",jsonStr);
            }
        },
        // 生命周期函数：vue对象创建完成时执行
        created() {
            let str = localStorage.getItem("tableData");
            if (null != str) {
                let obj = JSON.parse(str);
                this.tableData = obj;
            }
            
        }
    })

</script>
</html>